<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <a href="" class="button">提交</a>
        <a href="" class="button reverse dark">重置</a>
        <a href="" class="button fast white">查询</a>

        <!-- dribbble -->
        <a
            class="dribbble"
            href="https://dribbble.com/shots/7441241-Button-Hover-Effects"
            target="_blank"
            ><img
                src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg"
                alt=""
        /></a>
    </body>
    <style>
        .button.dark {
            --background: #2f3545;
            --shadow: 0 2px 8px -1px rgba(21, 25, 36, 0.32);
            --shadow-hover: 0 4px 20px -2px rgba(21, 25, 36, 0.5);
        }
        .button.white {
            --background: #fff;
            --text: #275efe;
            --shadow: 0 2px 8px -1px rgba(18, 22, 33, 0.04);
            --shadow-hover: 0 4px 20px -2px rgba(18, 22, 33, 0.12);
        }
        .button.fast {
            --duration: 0.32s;
        }

        .button {
            --background: #275efe;
            --text: #fff;
            --font-size: 16px;
            --duration: 0.44s;
            --move-hover: -4px;
            --shadow: 0 2px 8px -1px rgba(39, 94, 254, 0.32);
            --shadow-hover: 0 4px 20px -2px rgba(39, 94, 254, 0.5);
            --font-shadow: var(--font-size);
            padding: 16px 32px;
            font-family: 'Roboto';
            font-weight: 500;
            line-height: var(--font-size);
            border-radius: 24px;
            display: block;
            outline: none;
            text-decoration: none;
            font-size: var(--font-size);
            letter-spacing: 0.5px;
            background: var(--background);
            color: var(--text);
            box-shadow: var(--shadow);
            transform: translateY(var(--y)) translateZ(0);
            transition: transform var(--duration) ease, box-shadow var(--duration) ease;
        }
        .button div {
            display: flex;
            overflow: hidden;
            text-shadow: 0 var(--font-shadow) 0 var(--text);
        }
        .button div span {
            display: block;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            font-style: normal;
            transition: transform var(--duration) ease;
            transform: translateY(var(--m)) translateZ(0);
        }
        .button div span:nth-child(1) {
            transition-delay: 0.05s;
        }
        .button div span:nth-child(2) {
            transition-delay: 0.1s;
        }
        .button div span:nth-child(3) {
            transition-delay: 0.15s;
        }
        .button div span:nth-child(4) {
            transition-delay: 0.2s;
        }
        .button div span:nth-child(5) {
            transition-delay: 0.25s;
        }
        .button div span:nth-child(6) {
            transition-delay: 0.3s;
        }
        .button div span:nth-child(7) {
            transition-delay: 0.35s;
        }
        .button div span:nth-child(8) {
            transition-delay: 0.4s;
        }
        .button div span:nth-child(9) {
            transition-delay: 0.45s;
        }
        .button div span:nth-child(10) {
            transition-delay: 0.5s;
        }
        .button div span:nth-child(11) {
            transition-delay: 0.55s;
        }
        .button:hover {
            --y: var(--move-hover);
            --shadow: var(--shadow-hover);
        }
        .button:hover span {
            --m: calc(var(--font-size) * -1);
        }
        .button.reverse {
            --font-shadow: calc(var(--font-size) * -1);
        }
        .button.reverse:hover span {
            --m: calc(var(--font-size));
        }

        html {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        * {
            box-sizing: inherit;
        }
        *:before,
        *:after {
            box-sizing: inherit;
        }

        body {
            min-height: 100vh;
            display: flex;
            font-family: 'Roboto', Arial;
            justify-content: center;
            align-items: center;
            background: #e4ecfa;
        }
        body .button {
            margin: 0 12px;
        }
        body .dribbble {
            position: fixed;
            display: block;
            right: 20px;
            bottom: 20px;
        }
        body .dribbble img {
            display: block;
            height: 28px;
        }
    </style>
    <script>
        document
            .querySelectorAll('.button')
            .forEach(
                (button) =>
                    (button.innerHTML =
                        '<div><span>' +
                        button.textContent.trim().split('').join('</span><span>') +
                        '</span></div>')
            )
    </script>
</html>
